<!--<script charset="utf-8"  src="../../../static/kindeditor/kindeditor-all-min.js"></script>-->
<!--<script charset="utf-8" src="../../../static/kindeditor/lang/zh-CN.js"></script>-->
<style scoped>
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .inputFile{
        width:58px;
        height: 58px;
        line-height: 58px;
        border: 1px dashed #738096;
        text-align: center;
        border-radius: 5px;
        z-index:0;
        position: relative;
    }
    .inputFile:hover{
        border: 1px dashed #4074E1;
        cursor: pointer;
    }
    #test_upload{
        z-index: 999;
        position: absolute;
        left: 0;
        opacity:0;

    }
</style>
<template>

    <div>
        <product-title style="margin-bottom: 40px;"></product-title>
        <div class="form" >
            <Form ref="formItem" :model="formItem" :label-width="120">
                <FormItem label="标题" prop="title">
                    <Row>
                        <Col span="8">
                        <Input type="text" v-model="formItem.name" :disabled="canchange"></Input>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="作者" prop="author">
                    <Row>
                        <Col span="8">
                        <Input type="text" v-model="formItem.author"></Input>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="关键字" prop="keyword1">
                    <template v-for="(item,index) in formItem.keyword">
                    <Row>
                        <Col span="8">
                            <Input type="text" v-model="formItem.keyword[index]"></Input>
                        </Col>
                        <i-col span="1" offset="1">
                            <Button @click="keyword_del(index)">删除</Button>
                        </i-col>
                    </Row>
                    </template>
                </FormItem>
                <FormItem>
                    <Row>
                        <Col>
                        <Button type="primary" @click="keyword_add">增加关键字</Button>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="课件分类" prop="cate_first">
                    <Row>
                        <Col span="8">
                        <Select v-model="formItem.cate_first" @on-change = "get_cate_second">
                            <template v-for="item in cate_one_list">
                                <Option :value="item.id" :key="item.id" >{{item.cate_name}}</Option>
                            </template>
                        </Select>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="小分类" prop="cate_second">
                    <Row>
                        <Col span="8">
                        <Select v-model="formItem.cate_second">
                            <template v-for="item in cate_two_list">
                                <Option :value="item.id" :key="item.id" >{{item.cate_name}}</Option>
                            </template>
                            <Option value="kong">无</Option>
                        </Select>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="状态" prop="status">
                    <Row>
                        <Col span="8">
                        <Select v-model="formItem.status">
                            <Option value="2">发布</Option>
                            <Option value="1">未发布</Option>
                        </Select>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="图片" prop="img">
                    <Row>
                        <Col span="8">
                        <div  class="inputFile">
                            <input type="file" id='test_upload' @change="getToken" />
                            <Icon type="camera" size="20"></Icon>
                        </div>
                        <!--<input type="file" id='test_upload' multiple="true" @change="getToken" style="display: none;"/>-->
                            {{img_name}}
                            <img :src="formItem.pic" alt="" id="showImg" style="width: 100%" v-if="formItem.pic">
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="内容" prop="cont">
                    <Row>
                        <Col span="12">
                        <!--<Input type="textarea" :rows="6" v-model="formItem.content"></Input>-->
                        <!--<UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>-->
                        <div class="editor-container">

                        <UE :defaultMsg="formItem.content" :config=config ref="ue" id="ue"></UE>
                        </div>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem>
                    <Row>
                        <Col span="8" >
                        <Button type="primary" @click="submit">提交</Button>
                        <Button type="" @click="back">取消</Button>
                        
                        </Col>
                    </Row>
                </FormItem>
            </Form>
        </div>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle.vue';
    import {  create ,get_detail ,update,get_cate_one ,get_cate_two ,get_cate_list} from '../../api/classroom';
//    import { get_cate_first , get_cate_second} from '../../api/parter';
    import { getStsTokenWrite,getStsTokenRead } from '../../api/common';


    import UE from '../UE/ue.vue';

     import '../../../static/UEdit/ueditor.config.js';
     import '../../../static/UEdit/ueditor.all.js';
     import '../../../static/UEdit/lang/zh-cn/zh-cn.js';
     import '../../../static/UEdit/ueditor.parse.js';

    //import tinymce from 'tinymce';
//    import VueUEditor from 'vue-ueditor'



    export default {
        data() {
            return {
                defaultMsg: '',
                config: {
                    initialFrameWidth: null,
                    initialFrameHeight: 350
                },

                formItem:{
                    title:'',
                    author:'',
                    keyword:[''],
                    cate_first:'',
                    cate_second:'',
                    status:'',
                    pic:'',
                    id:'',
                    content:''
                },
                cate_one_list:[],
                cate_two_list:[],
                canchange:false,
                img_name:'',
                img_src:'',
                detail:[]
            }
        },
        created(){
            if(this.$route.params.id){
                new Promise((rev,rej)=>{
                    this.get_cate_first();
                    rev();
                }).then((data)=>{
                    this.get_detail();
                }).then(()=>{

//                    this.get_cate_second();
                });
            }else{
                this.get_cate_first();
            }
//            this.get_img();




        },
        components: {
            productTitle,
            UE
        },
        mounted() {

        },
        watch:{

        },
        updated(){
        },
        methods:{
            getUEContent() {
                this.formItem.content = this.$refs.ue.getUEContent();
            },
            setContent(){
                this.$refs.ue.getUEContent('1523456789');
            },
            keyword_del(index){
                this.formItem.keyword.splice(index,1);
            },
            keyword_add(){
                this.formItem.keyword.push('');
            },
            getToken() {
                new Promise((resolve, reject) => {
                    getStsTokenWrite().then(response => {
                        if (response.data.err == 0) {
                            let r = new FileReader();
                            this.haveImg = !this.haveImg;
                            this.sts = response.data.data.Credentials;
                            var client = new OSS.Wrapper({
                                region:'oss-cn-hangzhou',
                                accessKeyId: this.sts.AccessKeyId,
                                accessKeySecret: this.sts.AccessKeySecret,
                                stsToken: this.sts.SecurityToken,
                                bucket: 'kuaibao-imgs',
                                secure: true, 
                            });
                            const files = document.getElementById('test_upload');
                            if(files.files){
                                const file = files.files[0]
                                var imageType = /^image\//;
                                //是否是图片
                                if (!imageType.test(file.type)) {
                                    alert("请选择图片！");
                                    return;
                                }
                                const storeAs = file.name
                                this.img_name =file.name
                                r.readAsDataURL(file);
                                r.onload=function  (e) {
//                                    document.getElementById('showImg').src=this.result;
                                }

                                client.multipartUpload(storeAs, file, {

                                }).then((results) => {
                                    this.formItem.pic = results.url;
                                    if(results.url){
                                        this.resultUpload.push(results.url);
//                                        this.img_src = results.url;
//                                        this.formItem.img_name = file.name;

                                    }else{
                                        if(results.name === file.name){
                                            console.log(results.url)
                                            const url = this.bucketUrl+ file.name
                                            this.resultUpload.push(url);
                                        }
                                    }
                                }).catch((err) => {
                                    console.log(err)
                                })
                            }
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            get_detail(){
                this.formItem.id = this.$route.params.id;
                let params={
                    id:this.$route.params.id
                }
                this.canchange=true;
                new Promise((rev,rej)=>{
                    get_detail(params).then(res=>{
                        res.data.err==0?this.formItem = res.data.data:this.$Message.error(res.data.info);
                        this.formItem.status = this.formItem.status.toString();
                        this.detail = res.data.data;
                        this.$refs.ue.setUEContent(this.formItem.content);
                        this.$refs.ue.setUEContent1(this.formItem.content);
                        rev();
                    }).catch(error=>{
                        rej(error);
                    });
                });
            },
            get_cate_first(){
                new Promise((resolve,reject)=>{
                    get_cate_one().then((res)=>{
//                        
                        res.data.err==0?this.cate_one_list = res.data.data:this.$Message.error(res.data.info);
                        resolve();
                    }).catch(error=>{
                        reject(error);
                    });
                });

            },
            get_cate_second(){
                let params = {
                    id:this.formItem.cate_first
                }
                new Promise((rev,rej)=>{
                    get_cate_two(params).then(res=>{
                        if(res.data.err==0){
                            this.cate_two_list=res.data.data;
                            this.formItem.cate_second = res.data.data[0].id;
                        }else if(res.data.err==1400){
                            this.formItem.cate_second='kong';
                        } else{
                            this.$Message.error(res.data.info)
                        }
                        rev();
                    }).catch(error=>{
                        rej(error);
                    });
                });
            },
            submit(){
                this.getUEContent();
                if(this.$route.params.id){
                    new Promise((rev,rej)=>{
                        update(this.formItem).then(res=>{
                            res.data.err==0? this.$router.push({name:'classroom'}):this.$Message.error(res.data.info);
                            rev();
                        }).catch(error=>{
                            rej(error);
                        })
                    })
                }else{
                    new Promise((rev,rej)=>{
                        create(this.formItem).then(res=>{
                            res.data.err==0? this.$router.push({name:'classroom'}):this.$Message.error(res.data.info);
                            rev();
                        }).catch(error=>{
                            rej(error);
                        })
                    })
                }

            },
            back(){
                this.$router.push({name:'classroom'});
            }
        },
    }
</script>

